<template>
    <div :style="{width: '100%', height: '100%'}" ref="chartRef"></div>
</template>

<script setup>
    import {useEcharts} from '@/hooks/useEcharts';
    import * as echarts from 'echarts';

    const props = defineProps({
        width: String,
        height: String,
        theme: String,
        bgColor: String,
        title: String,
        subtitle: String,
        data: null,     // 曲线数据
        xAxisData: null // x轴数据
    });

    const lineColor = '#666bb6';
    const colorList = ['#9E87FF'];

    const option = {
        //提示框组件
        tooltip: {
            trigger: 'axis',
            backgroundColor: '#344572',
            borderColor: '#344572',
            textStyle: {
                color: 'white'
            },
        },
        title: {
            left: 'center',
            top: '1%',
            text: '智能电表_1#',
            textStyle: {
                color: '#fff',
                fontSize: 12,
                fontWeight: 400
            },
        },
        grid: {
            top: '4%',
            bottom: '20%',
            right: '4%'
        },
        xAxis: [{
            type: 'category', //坐标轴类型
            data: [
                '16:40',
                '16:45',
                '08:40',
                '09:40',
                '10:42',
                '12:42',
                '15:45',
                '15:45',
                '15:45',
                '15:45',

            ],
            axisLine: {
                lineStyle: {
                    color: lineColor,
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                rotate: 30,
                textStyle: {
                    color: 'white',
                },
            },
            boundaryGap: false, //坐标轴两边留白策略
        },
        ],
        yAxis: [
            {
                type: 'value',
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor,
                    },
                },
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#fff',
                    },
                },
                splitLine: {
                    show: false,
                },
            },
        ],
        series: [
            {
                smooth: true, //是否平滑曲线显示
                type: 'line',
                data: [10, 10, 30, 12, 15, 30, 70, 81, 82, 83],
                symbolSize: 3,
                symbol: 'circle', //拐点
                lineStyle: {
                    width: 2,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#9effff' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#9E87FF' // 100% 处的颜色
                        }],
                    },
                    shadowColor: 'rgba(158,135,255, 0.3)',
                    shadowBlur: 8,//图形阴影的模糊大小
                    shadowOffsetY: 10 //阴影垂直方向上的偏移距离
                },
                itemStyle: { //折线拐点标志的样式。
                    color: colorList[0],
                    borderColor: colorList[0]
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(147,208,52,0.3)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(147,208,52,0)',
                                },
                            ],
                            false
                        ),
                        shadowColor: 'rgba(0,202,149, 0.9)',
                        shadowBlur: 20,
                    },
                },
            },
        ],
    };
    const {
        chartRef,
        chart, nvll,
        echartsResizeFun
    } = useEcharts({props, option}); // {props: props, option: option}
</script>
<style scoped>
    :deep(.el-card__body) {
        padding: 0 !important;
    }
</style>